<template>
  <div class="settings">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>
    
    <el-tabs v-model="activeTab" class="settings-tabs">
      <!-- 基础设置 -->
      <el-tab-pane label="基础设置" name="basic">
        <el-card>
          <el-form :model="basicForm" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicForm.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="系统logo">
              <el-upload
                class="logo-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeLogoUpload"
              >
                <img v-if="basicForm.logoUrl" :src="basicForm.logoUrl" class="logo" />
                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicForm.email" placeholder="请输入联系邮箱" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="basicForm.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input
                v-model="basicForm.description"
                type="textarea"
                :rows="4"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 主题设置 -->
      <el-tab-pane label="主题设置" name="theme">
        <el-card>
          <el-form :model="themeForm" label-width="120px">
            <el-form-item label="主题色">
              <el-color-picker v-model="themeForm.primaryColor" />
            </el-form-item>
            <el-form-item label="成功色">
              <el-color-picker v-model="themeForm.successColor" />
            </el-form-item>
            <el-form-item label="警告色">
              <el-color-picker v-model="themeForm.warningColor" />
            </el-form-item>
            <el-form-item label="危险色">
              <el-color-picker v-model="themeForm.dangerColor" />
            </el-form-item>
            <el-form-item label="侧边栏样式">
              <el-radio-group v-model="themeForm.sidebarStyle">
                <el-radio label="dark">深色</el-radio>
                <el-radio label="light">浅色</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="头部样式">
              <el-radio-group v-model="themeForm.headerStyle">
                <el-radio label="fixed">固定</el-radio>
                <el-radio label="static">静态</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveThemeSettings">保存设置</el-button>
              <el-button @click="resetTheme">重置为默认</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-card>
          <el-form :model="securityForm" label-width="120px">
            <el-form-item label="登录超时">
              <el-select v-model="securityForm.loginTimeout" placeholder="请选择登录超时时间">
                <el-option label="30分钟" :value="30" />
                <el-option label="1小时" :value="60" />
                <el-option label="2小时" :value="120" />
                <el-option label="4小时" :value="240" />
                <el-option label="8小时" :value="480" />
              </el-select>
            </el-form-item>
            <el-form-item label="密码强度">
              <el-radio-group v-model="securityForm.passwordStrength">
                <el-radio label="low">低（6位以上）</el-radio>
                <el-radio label="medium">中（包含数字和字母）</el-radio>
                <el-radio label="high">高（包含数字、字母和特殊字符）</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="登录验证">
              <el-checkbox-group v-model="securityForm.loginVerification">
                <el-checkbox label="captcha">图片验证码</el-checkbox>
                <el-checkbox label="sms">短信验证</el-checkbox>
                <el-checkbox label="email">邮箱验证</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="IP白名单">
              <el-input
                v-model="securityForm.ipWhitelist"
                type="textarea"
                :rows="4"
                placeholder="请输入IP地址，每行一个"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 系统信息 -->
      <el-tab-pane label="系统信息" name="system">
        <el-card>
          <el-descriptions title="系统信息" :column="2" border>
            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="Node.js版本">{{ systemInfo.nodeVersion }}</el-descriptions-item>
            <el-descriptions-item label="Vue版本">{{ systemInfo.vueVersion }}</el-descriptions-item>
            <el-descriptions-item label="Element Plus版本">{{ systemInfo.elementVersion }}</el-descriptions-item>
            <el-descriptions-item label="运行环境">{{ systemInfo.environment }}</el-descriptions-item>
            <el-descriptions-item label="启动时间">{{ systemInfo.startTime }}</el-descriptions-item>
            <el-descriptions-item label="运行时间">{{ systemInfo.uptime }}</el-descriptions-item>
            <el-descriptions-item label="内存使用">{{ systemInfo.memoryUsage }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'Settings',
  components: {
    Plus
  },
  setup() {
    const activeTab = ref('basic')
    
    const basicForm = reactive({
      systemName: '后台管理系统',
      logoUrl: '',
      email: 'admin@example.com',
      phone: '400-1234-5678',
      description: '这是一个基于Vue3的后台管理系统'
    })
    
    const themeForm = reactive({
      primaryColor: '#409eff',
      successColor: '#67c23a',
      warningColor: '#e6a23c',
      dangerColor: '#f56c6c',
      sidebarStyle: 'dark',
      headerStyle: 'fixed'
    })
    
    const securityForm = reactive({
      loginTimeout: 120,
      passwordStrength: 'medium',
      loginVerification: ['captcha'],
      ipWhitelist: ''
    })
    
    const systemInfo = reactive({
      nodeVersion: process.version || 'Unknown',
      vueVersion: '3.x',
      elementVersion: '2.x',
      environment: 'Development',
      startTime: new Date().toLocaleString(),
      uptime: '2小时30分钟',
      memoryUsage: '128MB / 512MB'
    })
    
    const saveBasicSettings = () => {
      ElMessage.success('基础设置保存成功')
    }
    
    const saveThemeSettings = () => {
      ElMessage.success('主题设置保存成功')
    }
    
    const resetTheme = () => {
      Object.assign(themeForm, {
        primaryColor: '#409eff',
        successColor: '#67c23a',
        warningColor: '#e6a23c',
        dangerColor: '#f56c6c',
        sidebarStyle: 'dark',
        headerStyle: 'fixed'
      })
      ElMessage.success('主题已重置为默认')
    }
    
    const saveSecuritySettings = () => {
      ElMessage.success('安全设置保存成功')
    }
 
    const beforeLogoUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      
      // 创建图片预览
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        basicForm.logoUrl = reader.result
        ElMessage.success('Logo上传成功!')
      }
      
      // 阻止默认上传行为，使用自定义上传
      return false
    }
    
    return {
      activeTab,
      basicForm,
      themeForm,
      securityForm,
      systemInfo,
      saveBasicSettings,
      saveThemeSettings,
      resetTheme,
      saveSecuritySettings,
      beforeLogoUpload
    }
  }
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.settings-tabs {
  background: white;
}

.logo-uploader .logo {
  width: 178px;
  height: 178px;
  display: block;
}

.logo-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}

.logo-uploader .el-upload:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
